/**
 *
 * @returns a-table的多选select
 */

import { Icon } from '@iconify/vue'
export default function useTableSelect() {
  const selectedKeys = ref([])

  const RenderTableSelectTool = (props: { edit?: Function; del?: Function }) => {
    const { edit, del } = props
    return (
      <transition name='fade'>
        <div
          v-show={selectedKeys.value?.length}
          arco-theme='dark'
          class='absolute select-none bottom-12 left-1/2 z-[101] -translate-x-1/2 rounded bg-white border shadow px-2 py-1 flex items-center'
        >
          <a-button type='text' title='取消' onClick={() => (selectedKeys.value = [])}>
            {{
              icon: () => <Icon class='h-6 w-6 text-gray-500' icon='pajamas:close-xs' />,
            }}
          </a-button>
          <span class='text-sm text-gray-400 mx-2'>已选 {selectedKeys.value.length} 项</span>
          <a-button
            type='text'
            disabled={!edit}
            onClick={() => {
              edit && edit(selectedKeys.value)
            }}
          >
            编辑
          </a-button>
          <a-button
            type='text'
            disabled={!del}
            status='danger'
            onClick={() => {
              del && del(selectedKeys.value)
            }}
          >
            删除
          </a-button>
        </div>
      </transition>
    )
  }

  return {
    selectedKeys,
    RenderTableSelectTool,
  }
}
